<script setup lang="ts">
import { useRoute } from 'vue-router'
import Question from '@/components/Question.vue'
import { ref, computed } from 'vue'
import IsSolve from '@/components/IsSolve.vue'
import {
  userGetAnswerService,
  userGetQuestionListService,
  userSaveAnswerService,
  userSubmitAnswerService
} from '@/api/user'
import { ElMessageBox } from 'element-plus'
import router from '@/router'

const route = useRoute()
const testId = ref(route.params.id)

// 表格数据和题目信息
const questions = ref([
  {
    id: 1,
    title: '以下哪项是 JavaScript 的特点？',
    options: {
      A: '动态类型',
      B: '静态类型',
      C: '编译型',
      D: '无类型'
    }
  }
])

// 用来存储每道题的答案
const answers = ref<Record<number, String>>({})

const getQuestionList = async () => {
  console.log(testId.value)
  let res = await userGetQuestionListService(testId.value)
  console.log(res.data.data)
  questions.value = res.data.data
  res = await userGetAnswerService(testId.value)
  console.log(res.data.data)
  answers.value = res.data.data
}

getQuestionList()

const isSolved = computed(() => questions.value.map((question) => !!answers.value[question.id]))



const saveAnswer = async () => {
  await ElMessageBox.confirm('确认保存答案吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  // 包装成对象，满足后端的 DTO 要求
  const data = {
    answers: answers.value
  }
  await userSaveAnswerService(data, testId.value)
  ElMessage.success('保存成功')
  router.push('/student/test')
}

const submit = async ()=>{
  await saveAnswer()
  await userSubmitAnswerService(testId.value)
}
</script>

<template>
  <div class="main-test">
    <div>
      <div style="width: 100%">
        <el-scrollbar style="margin-top: 20px" height="80vh">
          <Question v-for="(question, index) in questions" :key="question.id">
            <template #title>
              <el-tag type="primary"> 单选</el-tag>
              {{ index + 1 }}.{{ question.title }}
            </template>
            <template #option>
              <el-radio-group v-model="answers[question.id]">
                <ul>
                  <li v-for="(option, key) in question.options" :key="key">
                    <el-radio :label="key"> {{ key }}. {{ option }}</el-radio>
                  </li>
                </ul>
              </el-radio-group>
            </template>
          </Question>
        </el-scrollbar>
      </div>
    </div>
    <IsSolve :questionList="questions" :isSolved="isSolved">
      <template #save>
        <el-button type="primary" @click="saveAnswer">保存答案</el-button>
      </template>
      <template #submit>
        <el-button type="success" @click="submit">提交</el-button>
      </template>
    </IsSolve>
  </div>
</template>

<style scoped>
.main-test {
  padding: 20px;
  position: relative;
  margin: auto;
  top: 50px;
  width: 70%;
  height: 80vh;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.el-radio-group,
.el-checkbox-group {
  display: block;
  margin-top: 10px;
}

li {
  list-style-type: none;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #45a049;
}

.btn-area {
  position: absolute;
  display: flex;
  width: 100%;
  margin: 20px;
  bottom: 20px;
}
</style>
